<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/scroll-bar.css">
    <link rel="stylesheet" href="../css/sub-page.css">
    <link rel="stylesheet" href="../css/font.css">
</head>

<body>
    <div class="ok-body">
        <!--面包屑导航区域-->
        <div class="ok-body-breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>首页</cite></a>
                <a><cite>任务管理</cite></a>
                <a><cite>新建任务</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
                <i class="layui-icon layui-icon-refresh"></i>
            </a>
        </div>

        <div class="layui-tab" lay-filter="nav">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="1">数据源设置</li>
                <li lay-id="2">流程设置</li>
                <li lay-id="3">基础设置</li>
            </ul>
            <div class="layui-tab-content">

                <div class="layui-tab-item layui-show">
                    <!--模糊搜索区域-->
                    <div class="layui-row ok-search">
                        <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
                        <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
                        <div class="layui-inline">
                            <input class="layui-input" name="id" id="dsname" autocomplete="off" placeholder="请输入数据集名称">
                        </div>
                        <div class="layui-inline">
                            <input class="layui-input" name="id" id="dstags" autocomplete="off" placeholder="数据集标签">
                        </div>

                        <button class="layui-btn" data-type="reload" id="search">搜索</button>
                    </div>
                    <!--数据表格-->
                    <table class="layui-hide" id="mytable" lay-filter="mytable"></table>
                    <input class="layui-hide" id='id' value="">

                    <button class="layui-btn" id="datasource_next">下一步</button>
                </div>
                <div class="layui-tab-item">
                    <form class="layui-form" lay-filter="usersetting">
                        <!-- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                            <legend>流程配置</legend>
                        </fieldset> -->
                        <div class="layui-form-item">
                            <fieldset class="layui-elem-field site-demo-button">
                                <label class="layui-form-label">流程</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="mark" title="标注" value="0" lay-filter="switch_mark">
                                    <input type="checkbox" name="inspect" title="检查" value="1" lay-filter="switch_inspect">
                                    <input type="checkbox" name="rndinspect" title="抽查" value="2" lay-filter="switch_rndinspect">
                                    <input type="checkbox" name="accept" title="验收" value="3" lay-filter="switch_accept">
                                </div>
                            </fieldset>
                        </div>

                        <div id="flow">
                            <fieldset class="layui-elem-field site-demo-button layui-hide" id="mark">
                                <legend>标注用户<a class="layui-btn layui-btn-warm layui-btn-xs"><i class="layui-icon useradd"
                                            data='mark'>添加</i></a></legend>

                                <!-- <div class="layui-btn-group" style="margin:10px;" >
                                    <a class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon">jack</i></a>
                                    <a class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon"></i></a>
                                </div> -->
                            </fieldset>

                            <fieldset class="layui-elem-field site-demo-button layui-hide" id="inspect">
                                <legend>检查用户<a class="layui-btn layui-btn-warm layui-btn-xs"><i class="layui-icon useradd"
                                            data='inspect'>添加</i></a></legend>

                            </fieldset>

                            <fieldset class="layui-elem-field site-demo-button layui-hide" id="rndinspect">
                                <legend>抽查用户 <a class="layui-btn layui-btn-warm layui-btn-xs"><i class="layui-icon useradd"
                                            data="rndinspect">添加</i></a>
                                </legend>

                            </fieldset>

                            <fieldset class="layui-elem-field site-demo-button layui-hide" id="accept">
                                <legend>验收用户<a class="layui-btn layui-btn-warm layui-btn-xs"><i class="layui-icon useradd"
                                            data="accept">添加</i></a></legend>

                            </fieldset>
                        </div>

                    </form>
                    <button class="layui-btn" id="flowsetting_next">下一步</button>

                </div>
                <div class="layui-tab-item ">
                    <!--form表单-->
                    <form class="layui-form layui-form-pane" lay-filter="flowsetting">
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="taskname" placeholder="请输入任务名称" autocomplete="off" class="layui-input"
                                    lay-verify="required">
                            </div>
                        </div>
                        <!-- <div class="layui-form-item">
                            <label class="layui-form-label">任务描述</label>
                            <div class="layui-input-block">
                                <input type="text" name="description" placeholder="请输入任务描述" autocomplete="off" class="layui-input"
                                    lay-verify="required">
                            </div>
                        </div> -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务标签</label>
                            <div class="layui-input-block">
                                <input type="text" name="tasktags" placeholder="请输入任务标签" autocomplete="off" class="layui-input"
                                    lay-verify="required">
                            </div>
                        </div>


                        <div class="layui-inline">
                            <label class="layui-form-label">标注分类</label>
                            <div class="layui-input-inline">
                                <select name="actions" lay-verify="required" lay-search="">
                                    <option value="">直接选择或搜索选择</option>
                                    <option value="0">数据筛选</option>
                                    <option value="1">单分类</option>
                                    <option value="2">多分类</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">任务描述</label>
                            <!-- <div class="layui-input-block">
                                        <textarea placeholder="请输入备注" class="layui-textarea" name="exttags"></textarea>
                                    </div> -->
                            <div id="demo" name="description"></div>
                        </div>
                        <div class="layui-form-item" style="margin:10px;z-index: -100;">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--js逻辑-->
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/laymd/marked.min.js"></script>
    <script>
        var jquery ;
        var taskobj={
            datasetid:undefined,//数据源ID
            markobj:{enable:0,users:[]},//标注
            inspectobj:{enable:0,users:[]},//检查
            rndinspectobj:{enable:0,users:[]},//抽查
            acceptobj:{enable:0,users:[]}//验收
        };//新任务对象


        layui.config({base: '../lib/laymd/'}).use(['element', 'table', 'jquery','form','laydate','laymd'], function () {
            var element = layui.element;
            jquery = layui.jquery;
            var $ = layui.jquery;
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            var laymd = layui.laymd;

            //实例化编辑器,可以多个实例
            var md = laymd.init('demo', {});
             //内容改变事件
            md.on('change', function () {
                //这里借用marked.js解析效率比HyperDown快,用户可自行找解析器
                this.setPreview(marked(this.getText()));
            });

            //初始化数据预览
            md.do('change');

            laydate.render({
                elem: '#startTime',
                type: "datetime"
            });

            laydate.render({
                elem: '#endTime',
                type: "datetime"
            });

            table.render({
                elem: '#mytable',
                url: '/dataset/list',
                limit: 10,
                cellMinWidth: 80,
                where: {
                    key: {
                        status: 1
                    }
                },
                page: true,
                id: 'folderlist',
                cols: [
                    [ {type:'radio'},   
                        {
                            field: 'dsid',
                            title: 'ID',
                            width: 80,
                            sort: true
                        },
                        {
                            field: 'dsname',
                            title: '数据集'
                        },
                        {
                            field: 'dstags',
                            title: '数据集标签'
                        },
                        {
                            field: 'dstype',
                            title: '数据源',
                            templet: '#typeTpl'
                        },
                        {
                            field: 'description',
                            title: '备注',
                            width: 120
                        },
                        {
                            field: 'createat',
                            title: '创建时间'
                        },{
                            field: 'actions',
                            title: '类型',
                            templet: '#actionTpl'
                        },
                        {
                            field: 'status',
                            title: '状态',
                            width: 95,
                            templet: '#statusTpl'
                        },
                        {
                            field: 'createtype',
                            title: '创建方式',
                            width: 95,
                            templet: '#createtypeTpl'
                        }
                    ]
                ],
                done: function (res, curr, count) {
                    $("#countNum").text(count);
                }
            });
          
            var active = {
            reload: function(){
                var dsname = $('#dsname').val();
                var dstags = $('#dstags').val();
                var start=$('#startTime').val();
                var end=$('#endTime').val();
                
                //执行重载
                table.reload('folderlist', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key:{
                            dsname:dsname,
                            dstags:dstags,
                            start:start,
                            end:end,
                            status:1                           
                        }
                    }
                });
            }
        };
        $('#search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('#dsname,#dstags').on('keydown',function(e){
            if(e.keyCode=='13'){
                $('#search').click();
            }
        });
      
           //数据集选择
         $("#datasource_next").click(function () {
             //获取选中的数据行
             var checkStatus = table.checkStatus('folderlist');
             var data = checkStatus.data;
             //layer.alert(JSON.stringify(data));
             var dsids=[];
             data.forEach(element => {
                 dsids.push(element.dsid);
             });
             if(dsids.length==0){
                layer.alert('请选择数据集');
                return;
             }
             //layer.alert(JSON.stringify(dsids));
             //taskobj.datasetid=dsids.join(',');//单选数据集，只会有一个
             element.tabChange('nav', '2'); //切换到：流程设置            
        });

         //监听行事件（单击事件为：rowDouble）
         table.on('row(mytable)', function(obj){
            var data = obj.data;
            taskobj.datasetid=data.dsid;
        });
        
        //流程设置
        $("#flowsetting_next").click(function () {
             var valited=valitedFlowsetting();
             //alert(valited);
             if(valited){
                element.tabChange('nav', '3'); //切换到：基础设置           
             }

             
        });
        
        //检验流程设置是否有效
        function valitedFlowsetting(){
            var f1=false,f2=false,f3=false,f4=false;
            if(taskobj.markobj.enable==0&&taskobj.inspectobj.enable==0&&taskobj.rndinspectobj.enable==0&&taskobj.acceptobj.enable==0){
                layer.alert('请启用合适的流程');
                return false;
            }
            
            if(taskobj.markobj.enable==1){
                if(taskobj.markobj.users.length==0){
                    layer.alert('请选择标注用户');
                    return false;
                }else{
                    f1=true;
                }
                
            }else{
                f1=true;
                }
                
                 if(taskobj.inspectobj.enable==1){
                if(taskobj.inspectobj.users.length==0){
                    layer.alert('请选择检查用户');
                    return false;
                }else{
                    f2=true;
                }
            }else{
                    f2=true;
                }
                 if(taskobj.rndinspectobj.enable==1){
                if(taskobj.rndinspectobj.users.length==0){
                    layer.alert('请选择抽查用户');
                    return false;
                }else{
                    f3=true;
                }
            } else{
                    f3=true;
                }
                
                if(taskobj.acceptobj.enable==1){
                if(taskobj.acceptobj.users.length==0){
                    layer.alert('请选择验收用户');
                    return false;
                }else{
                    f4=true;
                }
            }else{
                    f4=true;
                }
                
            if(f1&&f2&&f3&&f4){
                return true;
            }else{
                return false;
            }
        }
         //监听提交
         form.on('submit(add)', function (data) {
                //校验提交的数据完整性
                var valited= valitedFlowsetting();
                if(valited&&taskobj.datasetid!=undefined){
                    layer.open({
                type: 1
                ,title: false //不显示标题栏
                ,closeBtn: false
                ,area: '300px;'
                ,shade: 0.8
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                //,btn: ['火速围观', '残忍拒绝']
                ,btnAlign: 'c'
                ,moveType: 1 //拖拽模式，0或者1
                ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><br>数据处理中，请稍候... ^_^</br></div>'
                /* ,success: function(layero){
                var btn = layero.find('.layui-layer-btn');
                btn.find('.layui-layer-btn0').attr({
                        href: 'http://www.layui.com/'
                        ,target: '_blank'
                    });
                } */
            });
            
                    //console.log(data.field);
                    data.field.task=JSON.stringify(taskobj);
                    //layer.alert(JSON.stringify(data.field));
                    $.ajax({
                        url: '/task/addtask',
                        method: 'post',
                        data: data.field,
                        dataType: 'JSON',
                        success: function (res) {
                            if (res.code == 1) {
                                layer.msg('操作成功');
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                            } else {
                                layer.msg('操作失败');
                            }
                        },
                        error: function (data) {}
                    })
                }else{
                    layer.alert('数据源或流程设置不完整');
                }
                return false;
            });

             //监听指定开关
            form.on('checkbox(switch_mark)', function(data){
                if(this.checked){
                    $('#flow fieldset').eq(data.value).removeClass('layui-hide');
                    taskobj.markobj.enable=1;
                }else{
                    $('#flow fieldset').eq(data.value).addClass('layui-hide');
                    taskobj.markobj.enable=0;
                }
            });
            form.on('checkbox(switch_inspect)', function(data){
                if(this.checked){
                    $('#flow fieldset').eq(data.value).removeClass('layui-hide');
                    taskobj.inspectobj.enable=1;
                }else{
                    $('#flow fieldset').eq(data.value).addClass('layui-hide');
                    taskobj.inspectobj.enable=0;
                }
            });
            form.on('checkbox(switch_rndinspect)', function(data){
                if(this.checked){
                    $('#flow fieldset').eq(data.value).removeClass('layui-hide');
                    taskobj.rndinspectobj.enable=1;
                }else{
                    $('#flow fieldset').eq(data.value).addClass('layui-hide');
                    taskobj.rndinspectobj.enable=0;
                }
            });
            form.on('checkbox(switch_accept)', function(data){
                if(this.checked){
                    $('#flow fieldset').eq(data.value).removeClass('layui-hide');
                    taskobj.acceptobj.enable=1;
                }else{
                    $('#flow fieldset').eq(data.value).addClass('layui-hide');
                    taskobj.acceptobj.enable=0;
                }
            });

            $('.useradd').click(function(){
                var data=$(this).attr('data');
                console.log(data);
                //layer.alert(data);
                layer.open({
                    title: '用户列表',
                    type: 2,
                    shade: false,
                    maxmin: true,
                    shade: 0.5,
                    area: ['90%', '90%'],
                    content: '/task/users',
                    zIndex: layer.zIndex,
                    end: function () {
                        $(".layui-laypage-btn")[0].click();
                    },
                    success:function(layero, index){
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        body.find('#id').val(data);
                        console.log(body.find('#id').val());
                    }
                });
            });

            /* function rendselectedusers(users,selector){
                console.log(users);
                users.forEach(u => {
                    $('#'+selector).append('<div class="layui-btn-group" style="margin:10px;" >'+
                                    '<a class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon">jack</i></a>'+
                                    '<a class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon"></i></a>'+
                                '</div>');
                });

            } */

            $('#flow').on('click','.delete',function(){
                // console.log($(this).attr('data-id'));
                // console.log($(this).attr('data-target'));
                var userid=$(this).attr('data-id');
                var elem=$(this).attr('data-target');
                var selector=elem+userid;
                $('#'+selector).remove();
                removeusers(elem,userid);
                print();
            });
 
        })
        
        function rendselectedusers(users,selector){
                //console.log(users);
                users.forEach(u => {
                    /* jquery('#'+selector).append('<div class="layui-btn-group" style="margin:10px;" id="'+selector+u.userid+'" >'+
                                    '<a class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon">'+u.truename+'</i></a>'+
                                    '<a class="layui-btn layui-btn-primary layui-btn-xs delete" data-id="'+u.userid+'" data-target="'+selector+'"><i class="layui-icon"></i></a>'+
                                '</div>'); */
                                setUsersArray(selector,u);
                });  
                print();              
            }
        
        var mark=[],inspect=[],rndinspect=[],accept=[];//选择的用户集合
        function setUsersArray(arrayname,user){
            switch (arrayname) {
                case 'mark':
                    var index = mark.indexOf(user.userid);
                    if (index == -1) {
                        mark.push(user.userid);  
                        rendui(arrayname,user);                      
                    }                   
                    break;
                case 'inspect':
                var index = inspect.indexOf(user.userid);
                    if (index == -1) {
                        inspect.push(user.userid);
                        rendui(arrayname,user);
                    }   
                    break;
                case 'rndinspect':
                var index = rndinspect.indexOf(user.userid);
                    if (index == -1) {
                        rndinspect.push(user.userid);
                        rendui(arrayname,user);
                    } 
                    break;
                case 'accept':
                var index = accept.indexOf(user.userid);
                    if (index == -1) {
                        accept.push(user.userid);
                        rendui(arrayname,user);
                    } 
                    break;
                default:
                    break;
            }            
        }

        function removeusers(arrayname,value){
            switch (arrayname) {
                case 'mark':
                    var index = mark.indexOf(value);
                    if (index > -1) {
                        mark.splice(index, 1);
                    }
                    break;
                case 'inspect':
                    var index = inspect.indexOf(value);
                    if (index > -1) {
                        inspect.splice(index, 1);
                    }
                    break;
                case 'rndinspect':
                    var index = rndinspect.indexOf(value);
                    if (index > -1) {
                        rndinspect.splice(index, 1);
                    }
                    break;
                case 'accept':
                    var index = accept.indexOf(value);
                    if (index > -1) {
                        accept.splice(index, 1);
                    }
                    break;
                default:
                    break;
            }
        }

        function print(){
                console.log(mark);
                console.log(inspect);
                console.log(rndinspect);
                console.log(accept);
                taskobj.markobj.users=mark;
                taskobj.inspectobj.users=inspect;
                taskobj.rndinspectobj.users=rndinspect;
                taskobj.acceptobj.users=accept;
        }

        function rendui(selector,u){
            jquery('#'+selector).append('<div class="layui-btn-group" style="margin:10px;" id="'+selector+u.userid+'" >'+
                                    '<a class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon">'+u.truename+'</i></a>'+
                                    '<a class="layui-btn layui-btn-primary layui-btn-xs delete" data-id="'+u.userid+'" data-target="'+selector+'"><i class="layui-icon"></i></a>'+
                                '</div>');
        }

            
         
    </script>
    <!--模板-->
    <script type="text/html" id="statusTpl">
        <a href="javascript:;" title="状态" class="layui-btn layui-btn-xs  {{ d.status== 0? 'layui-bg-orange' : 'layui-bg-green'}} ">
                  {{#  if(d.status == 0){ }}
                    未完成
                  {{#  } }}
                  {{#  if(d.status == 1){ }}
                  创建完成
                  {{#  } }}
                  {{#  if(d.status == 2){ }}
                    已发布
                  {{#  } }}
            </a>
       
    </script>

    <script type="text/html" id="createtypeTpl">
        <a href="javascript:;" title="数据源" class="layui-btn layui-btn-xs {{ d.createtype== 1 ? 'layui-bg-green' : 'layui-bg-black'}}">{{ d.createtype== 1 ? '用户创建' : '系统生成'}}
    </a>
    </script>
    <script type="text/html" id="actionTpl">
        <a href="javascript:;" title="执行类别"  class="layui-btn layui-btn-xs">
        {{#  if(d.actions === 0){ }}
        数据筛选
        {{#  } }}     
       {{#  if(d.actions === 1){ }}
        单分类
        {{#  } }}
        {{#  if(d.actions === 2){ }}
        多分类
        {{#  } }}  
        {{#  if(d.actions === -1){ }}
        未知
        {{#  } }}  
</a>
</script>
</body>

</html>